<template>
  <div class="app-container">
      <el-row style="margin-bottom:20px;">
           <el-select v-model="review_result" placeholder="请选择"
            @change= "findChange"
           >
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >
                </el-option>
        </el-select>
      </el-row>
   

    <!-- 表格 v-loading.body="listLoading"-->
    <el-table
      ref="multipleTable"
      :data="review_authors"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="selection" width="50"> </el-table-column>

      <el-table-column align="center" label="序号" width="70">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="用户ID" width="" align="center">
        <template slot-scope="scope">
                {{ scope.row.user_id }}
        </template>
      </el-table-column>
      
    <el-table-column label="用户真实姓名" width="" align="center">
        <template slot-scope="scope">
                {{ scope.row.user_name }}
        </template>
    </el-table-column>

 <el-table-column label="用户邮箱" width="" align="center">
        <template slot-scope="scope">
                {{ scope.row.user_email }}
        </template>
    </el-table-column>
    
    <el-table-column label="用户密码" width="" align="center">
        <template slot-scope="scope">
                {{ scope.row.user_pwd }}
        </template>
    </el-table-column>

    <el-table-column label="用户笔名" width="" align="center">
        <template slot-scope="scope">
                {{ scope.row.pen_name }}
        </template>
    </el-table-column>

    <el-table-column label="用户简介" width="" align="center">
        <template slot-scope="scope">
                {{ scope.row.user_desc }}
        </template>
    </el-table-column>

      <el-table-column label="审核状态" width="" align="center">
        <template slot-scope="scope">
          {{ scope.row.review_result }}
        </template>
      </el-table-column>

      <el-table-column
        label="创建时间"
        width=""
        align="center"
        prop="title"
        sortable
      >
        <template slot-scope="scope">
          {{ scope.row.created_at |simpleTime }}
        </template>
      </el-table-column>

      <el-table-column
        label="审核时间"
        width=""
        prop="title"
        align="center"
        sortable
      >
        <template slot-scope="scope">
          {{ scope.row.review_at |simpleTime }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button :disabled="review_result===0?false:true" size="small" @click="handleEdit( scope.row)"
            style="margin-bottom:10px;">通过</el-button
          >
          <el-button
            size="small"
            type="danger"
            :disabled="review_result===0?false:true"
             @click="open(scope.row)"
            >不通过</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div  class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.currPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
    filters:{
        simpleTime(times){
            if(!times) return ''
            let date = new Date(times),
                year = date.getFullYear(),
                month = date.getMonth() +1,
                day = date.getDate(),
                h = date.getHours(),
                m = date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes(),
                s = date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds();
            return `${year}-${month}-${day} ${h}:${m}:${s}`
        },
},
  data() {
    return {
        // 弹框
         dialogVisible: false,
        review_authors:[],
      list: null, //表格list
      total: null,
      listLoading: true,
      listQuery: {
        currPage: 1,
        pageSize: 10,
      },
      review_result:0,//审核的结果
      options:[
        {label:'审核未通过',value:-1}, 
        {label:'审核中',value:0}, 
        {label:'审核通过',value:1},  
      ],
      temp: {
        chnlId: "22",
        hisChnlId: "",
        chnlName: "",
        state: "",
        isavailable: "",
        orderNum: 10,
      },
      typeOptions: [
        { key: "001", display_name: "类型1" },
        { key: "002", display_name: "类型2" },
        { key: "003", display_name: "类型3" },
      ],
      dialogFormVisible: false,
      multipleSelection: [],
    };
  },
  /*
1. 创建的时候查询所有请求结果
2. 点击select请求前10条，
3. 点击页码 请求包含option值

  */
 
  mounted() {
    this.getList();
  },
  methods: {
      // 不通过按钮点击事件
      open(row) {
        this.$prompt('请输入反馈内容', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '反馈内容: ' + value
          });
          row.feedback = value;
          this.handleEdit(row);

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
    //获取列表数据
     async getList() {
      let res = await this.$http.get("/get_review_authors", {
        params: {
          review_result: this.review_result,
          pageSize: this.listQuery.pageSize,
          currPage: this.listQuery.currPage,
        },
      });
      console.log(res.data);
       this.review_authors = res.data.reviews;
      this.listQuery.currPage = parseInt(res.data.currPage);
      this.listQuery.pageSize = parseInt(res.data.pageSize);
      this.total = res.data.total;
     },
    //操作分页
    handleSizeChange(val) {
      console.log("--------一页多少条：", val);
      this.listQuery.pageSize = val;
      this.getList();
    },
    //操作分页
    handleCurrentChange(val) {
      console.log("--------当前页：", val);
      this.listQuery.currPage = val;
      this.getList();
    },
    async handleEdit(row){
        console.log(row);
        let res = await this.$http.put('/review_author', row)
        this.$message({
            type:res.data.type,
            message:res.data.message
        })
        this.getList();
    },
    findChange(value){
        console.log(value);
        this.review_result = value;
        this.getList()
    }
  },
};
</script>
